<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="utf-8">
    <title>传智工作室</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
  <link rel="stylesheet" th:href="@{/static/css/font-awesome.min.css}" type="text/css">
  <link rel="stylesheet" th:href="@{/static/css/bootstrap-4.0.0-alpha.6.css}" type="text/css">
    <script th:src="@{/static/js/jquery-1.10.2.min.js}"></script>
    <script>
        function signIn() {
            var token = $("meta[name='_csrf']").attr("content");
            var header = $("meta[name='_csrf_header']").attr("content");
            var username = $("#username").val();
            var password = $("#password").val();
            if(username==""||password==""){
                alert("不能为空...");return;
            }
            $.ajax({
                url: "/login",
                type:"post",
                dataType:"json",
                beforeSend: function(request) {
                    request.setRequestHeader(header, token);
                },
                timeout:5000,
                data: {"username": username, "password": password},
                success: function (result) {
                    if(result == "0")
                        alert("用户名或者密码错误！");
                    else if(result == "1")
                        window.location.href = "/index.html?size=5&sort=publishTime,desc";
                    else
                        alert("发生未知错误！");
                },
                error:function (err) {
                    alert("网络错误！");
                }
            });
        }

        function signUp() {
            var token = $("meta[name='_csrf']").attr("content");
            var header = $("meta[name='_csrf_header']").attr("content");
            var username = $("#username").val();
            var password = $("#password").val();
            if(username==""||password==""){
                alert("不能为空...");return;
            }
            $.ajax({
                url: "/signUp",
                type:"post",
                dataType:"json",
                beforeSend: function(request) {
                    request.setRequestHeader(header, token);
                },
                timeout:5000,
                data: {"username": username, "password": password},
                success: function (result) {
                    if(result == false)
                        alert("用户名已存在");
                    else
                        $("#signInButton").click();
                },
                error:function (err) {
                    alert("网络错误！");
                }
            });
        }

        //若按回车则默认登陆
        $(window).keydown(function(event){
            console.log('success');
            if(event.which==13){
                signIn();
            }
        });
    </script>
</head>
<body>
  <div class="bg-faded py-5">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <h1 class=" pi-item">注册后请如实填写个人信息:)特别是最后一个...</h1>
          <p> <br>&nbsp;&nbsp;&nbsp;&nbsp;界面用boostrap写的，原谅一个后台用两天时间粗略地看bootstrap和Datatables...希望后面的同学可以慢慢完善吧</p>
            <p> <br>&nbsp;&nbsp;&nbsp;&nbsp;另外感谢之前仰纯，丘威和我一起弄的内部网站，那段时间的学习才使这个简易版的开发如此迅速</p>
        </div>
        <div class="col-md-6">
          <h1 class="pi-item">传智工作室</h1>
          <div>
            <fieldset class="form-group"> <label for="username">用户名</label> <input type="text" class="form-control" id="username" placeholder="Your name"> </fieldset>
            <fieldset class="form-group"> <label for="password">密码</label> <input type="password" class="form-control" id="password" placeholder="Password"> </fieldset>
            <button class="btn btn-primary" onclick="signIn()" id="signInButton">登录</button>
              <button class="btn btn-success" onclick="signUp()">注册</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
  <script src="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-alpha.6.min.js"></script>
</body>

</html>